<template>
	<view class="header">
		<!-- 轮播图 -->
		<swiper class="swiper" :autoplay="false" :interval="3000" :duration="1000" :current="swiperCurrent"
			:style="{height:`${swiperHeight}rpx`}" @change="changeSwiper">
			<swiper-item v-if="Firstvideo !== ''" :key="'video'">
				<video ref="videoRef" id="firstVideo" class="swiper-item" :src="imageUrl + Firstvideo" autoplay
					muted="true" enable-progress-gesture="false" show-center-play-btn="true"
					show-mute-btn="true"></video>
			</swiper-item>
			<swiper-item v-for="(item,index) in swiperImg" :key="item">
				<image class="swiper-item" :src=" imageUrl + item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>


		<!-- 返回键 -->
		<view v-if="porps.backShow" class="back" @click="toback"
			:style="{top:`${(capsuleHeight - capsuleButton) / 2 + TimeBarHeight}px`,height:capsuleButton + 'px',width:capsuleButton + 'px'}">

			<image src="@/static/product-cwr/Path.png" mode="aspectFill"></image>
		</view>
		<view v-if="Firstvideo !== ''" class="source-select"
			:style="{top:`${(capsuleHeight - capsuleButton) / 2 + TimeBarHeight}px`,height:capsuleButton + 'px',lineHeight:capsuleButton + 'px'}">
			<view @click="tovideo(0)" class="title" :class="{'active-title' : swiperCurrent == 0} ">
				视频
			</view>
			<view class="span">·</view>
			<view @click="tovideo(1)" class="title" :class="{'active-title' : swiperCurrent !== 0} ">
				照片集
			</view>
		</view>
		<!-- 轮播指示点样式修改 -->
		<view v-if="Firstvideo !== '' && swiperImg.length > 0" class="dots" >
			<block v-for="(item,index) in swiperImg.length" :key="item">
				<view class="dot" :class="index === swiperCurrent - 1 ? 'active' : ''"></view>
			</block>
		</view>
		<view v-if="Firstvideo == '' && swiperImg.length > 0"  class="dots" >
			<block v-for="(item,index) in swiperImg.length" :key="item">
				<view class="dot" :class="index === swiperCurrent ? 'active' : ''"></view>
			</block>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app'
	import {
		TimeBarHeight,
		capsuleHeight,
		capsuleButton
	} from '@/config/systemInfo.js'
	import {
		imageUrl
	} from '@/config/request/request.js'

	const current = ref(0)
	const swiperCurrent = ref(0)
	const porps = defineProps({
		backShow: {
			type: Boolean,
			default: false
		},
		swiperImg: {
			type: Array,
			default: []
		},
		swiperHeight: {
			type: Number,
			default: 0
		},

		Firstvideo: {
			type: String,
			default: ''
		}
	})
	onReady(() => {
		videoRef.value = uni.createVideoContext("firstVideo")
		console.log('onReadyvideoRef', videoRef.value);
	})
	//自动播放
	const videoRef = ref()
	// 轮播变化时的处理逻辑
	const changeSwiper = (e) => {
		swiperCurrent.value = e.detail.current;
		if (swiperCurrent.value == 0 && porps.Firstvideo) {
			playVideo(); // 当当前是视频项时播放视频
		} else {
			pauseVideo(); // 当当前是图片项时暂停视频
		}
	};
	// 监听swiperCurrent，确保视频项切换时指示点不显示
	watch(swiperCurrent, (newVal) => {
		// 如果当前是视频项，指示点不显示
		if (newVal === 0 && porps.Firstvideo) {
			// Video is being displayed, don't show dots
			swiperCurrent.value = 0;
		}
	});

	//切换至视频轮播或者图片集
	const tovideo = (swiperId) => {
		if (porps.Firstvideo) {
			if (swiperId == 1) { //切换至图片
				swiperCurrent.value = 1
			} else if (swiperId == 0) { //切换至视屏
				swiperCurrent.value = 0
			}
		}

	}
	const playVideo = () => {
		videoRef.value.play();

	};
	const pauseVideo = () => {
		videoRef.value.pause();
	};
	const toback = () => {
		console.log('换覅u');
		uni.navigateBack({
			delta: 1
		})
	}
	// 在页面加载时自动播放并静音
	onMounted(() => {
		// 进入页面时静音视频并自动播放
		if (videoRef.value) {
			videoRef.value.muted = true; // 默认静音
			playVideo()
		}
	});
</script>

<style>
	.header {
		width: 100%;
		position: relative;
	}

	.swiper {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.dots {

		width: 100%;
		display: flex;
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translate(-50%, 0);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
	}

	.dot {

		width: 30rpx;
		height: 4rpx;
		background: rgba(225, 255, 255, .3);
	}

	.active {

		background-color: #fff;
	}

	.back {
		position: absolute;
		left: 25rpx;
		width: 48rpx;
		height: 48rpx;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back image {
		width: 24rpx;
		height: 32rpx;
	}

	.source-select {
		position: absolute;
		left: 100rpx;
		display: flex;
		align-items: center;
	}

	.source-select .span {
		color: #fff;
		font-size: 34rpx;
		font-weight: 800;
	}

	.source-select .title {
		margin: 0 18rpx;
		color: #eee;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
	}

	.active-title {
		color: #fff;
		font-weight: bold;
		border-bottom: 4rpx solid #fff;
	}
</style>